<template>
  <g class="menu-container" v-if="visible">
    <rect
      x="0"
      y="0"
      width="100%"
      height="100%"
      fill="transparent"
      @click="$emit('close')"
    />
    <foreignObject
      :x="x"
      :y="y"
      width="150"
      height="140"
    >
      <div 
        class="context-menu"
        style="background: #1e1e1e; border: 1px solid #333; border-radius: 4px; padding: 4px 0;"
      >
        <div 
          v-for="(item, index) in items" 
          :key="index"
          class="menu-item"
          :class="{ 'disabled': item.disabled }"
          @click="!item.disabled && item.handler()"
          @mousedown.stop
        >
          {{ item.label }}
        </div>
      </div>
    </foreignObject>
  </g>
</template>

<script setup lang="ts">
defineProps<{
  visible: boolean;
  x: number;
  y: number;
  items: Array<{
    label: string;
    handler: () => void;
    disabled?: boolean;
    show?: boolean;
  }>;
}>();

defineEmits<{
  (e: 'close'): void;
}>();
</script>

<style lang="scss" scoped>
.menu-container {
  pointer-events: all;
}

.context-menu {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  
  .menu-item {
    padding: 8px 16px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.5;
    
    &:hover {
      background: rgba(64, 158, 255, 0.1);
      color: #409EFF;
    }
    
    &.disabled {
      color: #666;
      cursor: not-allowed;
      
      &:hover {
        background: none;
        color: #666;
      }
    }
  }
}
</style> 